﻿@inherits AdminCompontentBase

<div class="d-flex full-height">
    <div class="login ma-auto ml-5">
        <SlideXTransition LeaveAbsolute>
            <STabSheets 
                Value="@T(Tab)"
                Tabs="@(new List<string>{T(CustomLoginTab.Login),T(CustomLoginTab.Register)})"
                Class="overflow-y"
                Style="width:512px;max-height:64vh;height: auto;" ValueChanged="_ => {}">
                @if (Logo is not null)
                {
                    <div class="d-flex mb-2">
                        <MAvatar Size=80 Class="mx-auto">
                            <img src="@Logo" />
                        </MAvatar>
                    </div>
                }
                @if (string.IsNullOrEmpty(Title) is false)
                {
                    <div class="d-flex mb-12">
                        <div class="mx-auto h5 emphasis--text">@Title</div>
                    </div>
                }
                <MTabItem Value="T(CustomLoginTab.Login)">
                    <MForm Model=Login EnableValidation EnableI18n Class="pt-2">
                        <STextField Dense=false @bind-Value="Login.Account" Class="mb-13 btn emphasis--text" Height="58" Label="@T(nameof(Login.Account))" />
                        <SPassword @bind-Value="Login.Password" Class="mb-1" />
                        <div class="d-flex mb-13">
                            <MSpacer />
                            <span class="caption regular3--text">@T("Forgot password?")</span>
                        </div>
                        <div class="d-flex">
                            <SButton OnClick="() => context.Validate()" Class="large-button mx-auto" Color="primary" Rounded>
                                @T("Login")
                            </SButton>
                        </div>
                    </MForm>
                    @if (ThirdPartyIdps.Count > 0)
                    {
                        <div class="d-flex block-center mt-12 mb-4">
                            <div style="background: #E9EDF7;height: 1px;width: 100%;" />
                            <div class="mx-4 text-center body2 regular3--text" style="@(I18n.Culture.ToString() == "zh-CN"?"min-width:100px":"min-width:80px")">@T("or login with")</div>
                            <div style="background: #E9EDF7;height: 1px;width: 100%;" />
                        </div>
                        <div class="text-center">
                            @foreach (var thirdPartyIdp in ThirdPartyIdps)
                            {
                                <MAvatar Size="30" Class="hover-pointer ml-6">
                                    <img src="@thirdPartyIdp.Icon" />
                                </MAvatar>
                            }
                        </div>
                    }
                </MTabItem>
                <MTabItem Value="T(CustomLoginTab.Register)">
                    <MForm Model=Register EnableValidation EnableI18n Class="pt-2">
                        @foreach (var registerField in RegisterFields)
                        {
                            switch (registerField.RegisterFieldType)
                            {
                                case RegisterFieldTypes.Account:
                                    <STextField @bind-Value="Register.Account" Label="@T(nameof(Register.Account))" Height="58" Class="mb-10" />
                                    break;
                                case RegisterFieldTypes.Password:
                                    <SPassword @bind-Value="Register.Password" Class="mb-10" />
                                    <SPassword @bind-Value="Register.ConfirmPassword" Label="@T(nameof(Register.ConfirmPassword))" Class="mb-10" />
                                    break;
                                case RegisterFieldTypes.Name:
                                    <STextField @bind-Value="Register.Name" Label="@T(nameof(Register.Name))" Height="58" Class="mb-10" />
                                    break;
                                case RegisterFieldTypes.DisplayName:
                                    <STextField @bind-Value="Register.DisplayName" Label="@T(nameof(Register.DisplayName))" Height="58" Class="mb-10" />
                                    break;
                                case RegisterFieldTypes.IdCard:
                                    <STextField @bind-Value="Register.IdCard" Label="@T(nameof(Register.IdCard))" Height="58" Class="mb-10" />
                                    break;
                                case RegisterFieldTypes.PhoneNumber:
                                    <STextField @bind-Value="Register.PhoneNumber" Label="@T(nameof(Register.PhoneNumber))" Height="58" Class="mb-10" />
                                    break;
                                case RegisterFieldTypes.Email:
                                    <STextField @bind-Value="Register.Email" Label="@T(nameof(Register.Email))" Class="mb-10" Height="58" />
                                    break;
                                default: throw new UserFriendlyException(T(""));
                            }
                        }
                        <div class="d-flex">
                            <SButton OnClick="() => context.Validate()" Class="large-button mt-6 mx-auto" Color="primary">
                                @T("Register")
                            </SButton>
                        </div>
                    </MForm>
                </MTabItem>
            </STabSheets>
        </SlideXTransition>
    </div>
</div>